<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form inline :model="tableFrom" ref="tableFrom">
          <!-- 筛选条件 部门/角色/岗位 -->
          <el-form-item label="用户昵称" prop="keywords">
            <el-input v-model="tableFrom.keywords" placeholder="请输入昵称/姓名手机号模糊匹配" class="selWidth">
            </el-input>
          </el-form-item>
      
          <el-form-item label="岗位筛选" label-width="100px" prop="postId">
            <el-select v-model="tableFrom.postId" clearable placeholder="请选择岗位">
              <el-option v-for="item in branchList" :key="item.postId" :label="item.postName" :value="item.postId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="角色筛选" label-width="100px" prop="roleId">
            <el-select v-model="tableFrom.roleId" clearable placeholder="请选择角色">
              <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分行筛选" label-width="100px" prop="deptId">
            <el-select v-model="tableFrom.bankId" clearable placeholder="请选择">
              <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" :loading="loading" @click="search()"
            v-hasPermi="['admin:article:update']">搜索</el-button>
          <el-button :loading="loading" @click="resetForm('tableFrom')"
            v-hasPermi="['admin:article:update']">重置</el-button>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="tableData.data" width="900px" size="small"
        @selection-change="handleSelectionChange" ref="multipleTable">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="uid" label="ID" min-width="60" />
        <el-table-column prop="nickname" label="昵称" min-width="130" />
        <el-table-column prop="phone" label="手机号" min-width="130" />
        
        <el-table-column label="用户头像" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image class="tabImage" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sex | saxFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column label="分行" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.branch | filterEmpty}}</span>
          </template>
        </el-table-column>

        <el-table-column label="岗位" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.post | filterEmpty}}</span>
          </template>
        </el-table-column>

        <el-table-column label="角色" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.role | filterEmpty}}</span>
          </template>
        </el-table-column>

      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    userListApi
  } from '@/api/user'
  import {
    listDept
  } from '@/api/dept'
  import {
    getRoleList
  } from '@/api/role'
  import {
    listPost
  } from '@/api/post'
  export default {
    name: 'UserList',
    filters: {
      saxFilter(status) {
        const statusMap = {
          1: '男',
          2: '女'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        templateRadio: 0,
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 10,
          keywords: ''
        },
        deptList: [],
        branchList: [],
        roleList: [],
        cUids: []
      }
    },
    mounted() {
      this.getList()
      this.deptLists();
      this.branchLists();
      this.roleLists();
    },
    methods: {

      handleSelectionChange(val) {
        const tables = []
        val.map((item) => {
          tables.push({
            src: item.image,
            id: item.id
          })
        })
        this.multipleSelection = val
      },

      // 分行
      deptLists() {
        listDept({
          pageSize: 999
        }).then(async res => {
          this.deptList = res.list
        })
      },

      // 岗位
      branchLists() {
        listPost({
          pageSize: 999
        }).then(async res => {
          this.branchList = res.list
        })
      },

      // 等级列表
      roleLists() {
        getRoleList({
          pageSize: 999
        }).then(async res => {
          this.roleList = res.list
        })
      },

      //复选框内容改变
      getTemplateRow(idx, row) {
        if (this.cUids.indexOf(row.uid) != -1) {
          this.cUids.push(row.uid)
        }
        //this.$emit('getTemplateRow', row);
      },


      // 列表
      getList() {
        this.loading = true
        userListApi(this.tableFrom).then(res => {
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(res => {
          this.$message.error(res.message)
          this.loading = false
        })
      },
      search() {
        this.loading = true
        userListApi(this.tableFrom).then(res => {
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(res => {
          this.$message.error(res.message)
          this.loading = false
        })
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getList()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList()
      },

      resetForm(name) {
        this.$refs[name].resetFields();
        this.getList()
      },

    }
  }
</script>

<style scoped>

</style>